<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:68:"D:\wamp\www\xxoa\public/../application/mobile\view\design\index.html";i:1536635754;}*/ ?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <!-- <link rel="stylesheet" type="text/css" href="/static/mobile/css/aui.css" /> -->
    <link rel="stylesheet" type="text/css" href="/static/mobile/css/design.css" />
    <style type="text/css">
        .header {
            padding: 2.5rem 0.5rem 2rem 0.5rem;
        }
        .list img{
            width: 600px;
            height: 350px;
            background: url('/static/mobile/loading.gif') no-repeat center center;
        }
    </style>

</head>
<body>
	<div id="top">设计咨询</div>

	<div id="course">
		<?php if(is_array($list) || $list instanceof \think\Collection || $list instanceof \think\Paginator): $i = 0; $__LIST__ = $list;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$v): $mod = ($i % 2 );++$i;?>
			<div class="list clearfix" style='display: none' data-style='display:block'>
				<a href="/mdetail?id=<?php echo $v['id']; ?>" title="Web端项目总结（设计思路）">
					<div class="img fl" >
						<img data-src="/static/mobile/<?php echo $v['icon']; ?>" style='width: 100px;height:70px'>
					</div>
					<div class="img-r">
						<div class="title"><?php echo $v['title']; ?></div>
						<div class="from"><span class="ml"><?php echo $v['create_time']; ?></span></div>
					</div>
				</a>
			</div>
		<?php endforeach; endif; else: echo "" ;endif; ?>
		
	</div>
    
    <footer id="footer" >
        <a href="/mindex" style='width:25%'><i class="iconfont"></i>首页</a>
        <a href="/mcate" class="on" style='width:25%'><i class="iconfont"></i>素材分类</a>
        <a href="/mdesign" style='width:25%'><i class="iconfont"></i>设计资讯</a>
        <a href="/mlogin" style='width:25%'><i class="iconfont"></i>用户后台</a>
    </footer>


</body>
<script type="text/javascript">
	var box = course.children;
	var imgs = document.getElementsByTagName('img')
	// console.log(imgs);
	// console.log(box[0]);
	// 获取div的宽度
	var box_width = course.offsetWidth;
	// console.log(box_width);
	// 获取视口的高度
	var view_height = document.documentElement.clientHeight;
	// console.log(view_height);
	// 计算 横向加载张数
	var x_number = 1;
	// console.log(x_number,box[0].offsetTop,box[0].offsetHeight);
	// 计算间距
	// 一张图一个间距
	var padding = 10;
    var foot = footer.offsetHeight;
	// 计算首屏文章数量
    // var first_number = Math.ceil((视口高-首图至顶部偏移量) / div高) * 计算 横向加载张数;
    var first_number = Math.ceil((view_height - foot - 57) / ( 92 + padding)) *  x_number;
    // console.log(first_number);

    // 总记录数
    var m = 0;
    loadBox(m, first_number);
    m += first_number;

        window.onscroll = function () {
        if (m >= box.length) {return;}
        // 获取滚动条滚动距离
        var top = document.body.scrollTop || document.documentElement.scrollTop;

        // 还未加载的首个DIV 到顶部的偏移量
        var box_top =  box[m].offsetTop;

        if ((view_height + top) >= box_top) {
            loadBox(m, x_number);
            m += x_number;
        }
        // console.log(top + ' : ' + box_top);
    }

        /**
     * 加载图片函数
     * @param   strat  从第几张开始加载
     * @param   length 加载几张
     */
    function loadBox(strat, length) {
        for (var i = strat; i < (strat + length); i++) {
            if (i >=  box.length) {return;}
            (function (i){
                setTimeout(function() {
                     box[i].style =  box[i].getAttribute('data-style');
                }, 1000);
                setTimeout(function() {
                     imgs[i].src =  imgs[i].getAttribute('data-src');
                }, 1500);
            })(i);
        }
    }
</script>

</html>



